Type, class, and ID selectors
全局选择器
全局选择器,是由一个(*
)代指的,用于选择文章中的所有内容(或者是父元素中的所有内容,比如,它紧随在其他元素以及邻代运算符之后的时候)
* {
margin: 0;
}
它一般用于比较特殊的情况:
使用全局选择器,让选择器更易读
比如我们想选中<article>
元素的第一子元素,不论它是什么元素,都给它加粗,我可以将:first-child
选择器(我们将会在伪类和伪元素课中进一步了解)用作<article>
元素选择器的一个后代选择器:
article :first-child {
}
但是这会和article:first-child
混淆,而后者选择了作为其他元素的第一子元素的<article>
元素。
为了避免这种混淆,我们可以向:first-child
选择器加入全局选择器,这样选择器所做的事情很容易就能看懂。选择器正选中<article>
元素的_任何_第一子元素:
article *:first-child {
}
Note:这个可能比较难懂,多理解一下就懂了。
指向特定元素的类
用不同方式高亮一个带有highlight
类的<span>
和带有 highlight
类的<h1>
标题。
span.highlight {
background-color: yellow;
}
h1.highlight {
background-color: pink;
}
这种方式使 CSS 没那么可复用,因为类现在只会应用到那个特定元素,在认为规则也该应用到其他元素的时候,你会需要另外加上一个选择器。
多个类被应用的时候指向一个元素
你能对一个元素应用多个类,然后分别指向它们,或者仅仅在选择器中存在所有这些类的时候选择这一元素。在你的站点上,构建可以以不同方式组合起来的组件的时候,这会有用。
有以下奇怪的写法:
.notebox {
border: 4px solid #666;
padding: .5em;
}
.notebox.warning {
border-color: orange;
font-weight: bold;
}
.notebox.danger {
border-color: red;
font-weight: bold;
}
<div class="notebox">
This is an informational note.
</div>
<div class="notebox warning">
This note shows a warning.
</div>
<div class="notebox danger">
This note shows danger!
</div>
<div class="danger">
This won't get styled — it also needs to have the notebox class
</div>
最后一个<div>
不会被应 用,因为他只有 danger
class,它需要 notebox
来应用。
想法:class的空格好像很特殊,似乎表示应用了多种class。
ID选择器
ID 选择器开头为#
而非句点,不过基本上和类选择器是同种用法。可是在一篇文档中,一个 ID 只会用到一次。它能选中设定了id
的元素,你可以在 ID 前面加上类型选择器,只指向元素和 ID 都匹配的类。
#one {
background-color: yellow;
}
h1#heading {
color: rebeccapurple;
}
<h1 id="heading">ID selector</h1>
<p>Veggies es bonus vobis, proinde vos postulo essum magis kohlrabi welsh onion daikon amaranth tatsoi tomatillo
melon azuki bean garlic.</p>
<p id="one">Gumbo beet greens corn soko <strong>endive</strong> gumbo gourd. Parsley shallot courgette tatsoi pea sprouts fava bean collard
greens dandelion okra wakame tomato. Dandelion cucumber earthnut pea peanut soko zucchini.</p>
Note:ID有很高的优先级,所以一般用class而不用ID。但是如果你没有权限用class的话,这将是你唯一的办法。